@import "../include/css/functions";

#callout {
    background-image: url(../include/img/diagram_bg.jpeg);
}

@title-width: 20%;
@desc-width: 100% - @title-width - 1%;

div.doc {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: solid 1px rgba(0,0,0,.25);
    
    .title, .desc {
        display: inline-block;
        line-height: 1.4em;
        font-size: .9em;
        color: rgba(0,0,0,.6);
        vertical-align: top;
        -webkit-transition: color .25s linear;
    }
    
    .title {
        width: @title-width;
        font-weight: bold;
    }
    
    .desc {
        width: @desc-width;
    }
}

div.doc:last-child {
    border-bottom: none;
}

div.legend {
    border-bottom: solid 1px rgba(0,0,0,.75);
    
    .title, .desc {
        font-size: @font-size;
        color: rgba(0,0,0,.8);
        text-transform: uppercase;
        font-weight: bold;
        line-height: 1em;
    }
}

.doc:hover {
    .title, .desc {
        color: rgba(0,0,0,.9);
    }
}

.title a:hover {
    color: #900 !important;
}

.legend:hover {
    .title, .desc {
        color: inherit;   
        text-shadow: none;
    }
}